@font-face {
    font-family: Accordalt-Bold;
    src: url(Accordalt-Bold-webfont.woff);
    src: url(Accordalt-Bold-webfont.woff2);
    font-display: swap;
}

@font-face {
    font-family: Avenir-Heavy;
    src: url(Avenir-Heavy-webfont.woff);
    font-display: swap;
}

::selection {
	background:#FCFA7A;
	color:#000000;
}

::-moz-selection {
	background:#FCFA7A; 
	color:#000000;
}

::-webkit-selection {
	background:#FCFA7A; 
	color:#000000;
}
body{
    margin: 0 auto;
    text-align: left;
    color: #8E949C;
    background-color: #FFFFFF;
	font-size:40px;
	line-height: 48px;
	font-family: "Avenir-Heavy" ,"Open Sans Regular", "Helvetica", "Arial", sans-serif;
	text-align: left;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
titile{
    padding-left: 0;
}
name{
    color: #000000;
	white-space: nowrap;
}
a {
	color: #000000;
	font-size:40px;
	font-family: "Accordalt-Bold" ,"Open Sans Regular", "Helvetica", "Arial", sans-serif;
	text-decoration:none;
	background: linear-gradient(#AEB6BF, #AEB6BF) no-repeat;
	background-size: 100% 6px; 
	background-position: 0 40px;
	#text-shadow: 1px 1px 4px #FFFFFF;
}
a:hover {
	text-decoration:none;
	background: linear-gradient(#4DC3FF, #4DC3FF) no-repeat;
	background-size: 100% 6px;
	background-position: 0 40px;
	#text-shadow: 1px 1px 4px #FFFFFF;
}
a:hover span.red {
    text-decoration:none;
    background: linear-gradient(#FF859C, #FF859C) no-repeat;
    background-size: 100% 6px;
    background-position: 0 40px;
    
}
a:hover span.green {
    text-decoration:none;
    background: linear-gradient(#CCE295, #CCE295) no-repeat;
    background-size: 100% 6px;
    background-position: 0 40px;
    
}
a:hover span.purple {
    text-decoration:none;
    background: linear-gradient(#B58AFF, #B58AFF) no-repeat;
    background-size: 100% 6px;
    background-position: 0 40px;
    
}
.box{
    margin: auto;
}
.box .header{
    text-align: left;
    color: #8E949C;
    font-size: 64px;
    line-height: 64px;
    min-width:300px;
    max-width:850px;
    width:60%;
    margin:80px auto 80px;
    padding: auto;
    #border:1px solid black;
}
.box .main{
    position:relative;
	margin:80px auto 80px;
    text-align: left;
    min-width:300px;
    max-width:850px;
    width:60%;
    #border:1px solid black;
}
/* I am 字母缩进对齐 */
@media (max-width: 610px){
    name{
        color: #000000;
        white-space: nowrap;
        position: relative;
        padding-left:0;
    }
    titile{
        padding-left: 14.34px;
    }
}
/* 深色模式 */
@media (prefers-color-scheme: dark) {
    ::selection {
        background:#48A0EB;
        color:#FFFFFF;
    }

    ::-moz-selection {
        background:#48A0EB; 
        color:#FFFFFF;
    }
    
    ::-webkit-selection {
        background:#48A0EB; 
        color:#FFFFFF;
    }

    body {
        color: #A2A3A2;
        background-color: #2D2E2F;
    }
    .box .header{
        color: #7F7F7F;
    }
    titile{
        color:#A2A3A2;
    }
    name{
        color: #FFFFFF;
        white-space: nowrap;
    }
    a {
        color: #FFFFFF;
        font-size:40px;
        font-family: "Accordalt-Bold" ,"Open Sans Regular", "Helvetica", "Arial", sans-serif;
        text-decoration:none;
        background: linear-gradient(#8B8C8B, #8B8C8B) no-repeat;
        background-size: 100% 6px; 
        background-position: 0 40px;
        text-shadow: #000000 0px 0 3px;
    }
    a:hover {
        text-shadow: #000000 0px 0 3px;
    }
}
.footer .Copyright {font-size:6px;}